<template>
  <p>{{ keyword }}</p>
  <input v-model="keyword" />
</template>

<script>
// 需求：不用 ref 来实现，用 customRef 来实现
import { customRef, ref } from 'vue'
const myRef = (keyword) => {
  return customRef((track, trigger) => {
    return {
      get() {
        track() // 追踪这儿数据的变化
        // 获取数据的时候会触发这儿
        return keyword
      },
      set(newValue) {
        // 设置数据的时候会触发这儿
        // console.log(newValue)
        keyword = newValue
        trigger() // 触发视图的更新
      },
    }
  })
}
export default {
  setup() {
    const keyword = myRef('vue')
    return {
      keyword,
    }
  },
}
</script>
